import React from 'react'
import {
  Grid,
  Box,
  TextField,
  Button,
  IconButton,
  FormControl,
  Select,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  OutlinedInput,
  InputAdornment,
  FormHelperText,
  TextareaAutosize,
  RadioGroup,
  FormControlLabel,
  Radio,
  Input,
  MenuItem,
  Checkbox,
  ListItemText,
} from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import { Visibility, VisibilityOff } from '@material-ui/icons'
import Autocomplete from '@material-ui/lab/Autocomplete'
import Slide from '@material-ui/core/Slide'

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction='up' ref={ref} {...props} />
})

const useStyles = makeStyles((theme) => ({
  dialog_grid: {
    width: '600px',
    marginBottom: '40px',
  },
  dialog_key: {
    height: '100%',
    marginBottom: '40px',
    display: 'flex',
    justifyContent: 'flex-end',
    // alignItems: 'center',
    fontSize: '14px',
    color: '#606266',
    fontWeight: 'bold',
    whiteSpace: 'nowrap',
  },
}))

const ITEM_HEIGHT = 48
const ITEM_PADDING_TOP = 8
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 185,
    },
  },
}

const DialogAddAndEdit = ({
  open,
  onDialogOpen,
  dialogType,
  dialogData,
  setDialogData,
  treeDialogDatas,
  showPassword,
  handleClickShowPassword,
  handleMouseDownPassword,
  sexList,
  postsList,
  rolesList,
  onAddUser,
  disable,
}) => {
  const classes = useStyles()

  /**
   * @description: 校验电话和邮箱规则
   */
  const onVerify = (value, type = '') => {
    const phonenumber = /^[1][3,4,5,7,8][0-9]{9}$/
    const email = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
    let data = false
    if (type === 'string') {
      if (value) {
        data = true
      }
    } else {
      if (phonenumber.test(value)) {
        data = true
      }
      if (email.test(value)) {
        data = true
      }
    }

    if (value?.length > 100) {
      data = false
    }
    return data
  }

  return (
    <>
      <Dialog
        open={open}
        onClose={() => onDialogOpen(false)}
        aria-labelledby='form-dialog-title'
        TransitionComponent={Transition}
        keepMounted
        aria-describedby='form-dialog-title-description'
      >
        <DialogTitle id='form-dialog-title'>{dialogType.title}</DialogTitle>
        <DialogContent className={classes.dialog_grid}>
          <Box>
            <Grid id='form-dialog-title-description' container>
              <Grid item xs={2}>
                <Box component='span' m={1} className={classes.dialog_key}>
                  <Box component='span' color='red'>
                    *
                  </Box>
                  用户昵称
                </Box>
              </Grid>
              <Grid item xs={4}>
                <TextField
                  id='outlined-basic'
                  label=''
                  variant='outlined'
                  size='small'
                  maxLength={2}
                  value={dialogData.nickName}
                  onChange={(event) => setDialogData({ ...dialogData, nickName: event.target.value })}
                  error={!onVerify(dialogData.nickName, 'string')}
                  helperText={onVerify(dialogData.nickName, 'string') ? false : '用户昵称不能为空'}
                />
              </Grid>
              <Grid item xs={2}>
                <Box component='span' m={1} className={classes.dialog_key}>
                  归属部门
                </Box>
              </Grid>
              <Grid item xs={4}>
                <Autocomplete
                  id='combo-box-demo'
                  size='small'
                  options={treeDialogDatas}
                  value={dialogData?.deptId}
                  onChange={(event, newValue) => {
                    console.log('event, newValue', event, newValue)
                    setDialogData({ ...dialogData, deptId: newValue })
                  }}
                  getOptionLabel={(option) => option.label || ''}
                  style={{ width: '100%' }}
                  renderInput={(params) => <TextField {...params} size='small' label='' variant='outlined' />}
                />
              </Grid>
              <Grid item xs={2}>
                <Box component='span' m={1} className={classes.dialog_key}>
                  手机号码
                </Box>
              </Grid>
              <Grid item xs={4}>
                <TextField
                  id='outlined-basic'
                  label=''
                  variant='outlined'
                  size='small'
                  value={dialogData.phonenumber}
                  onChange={(event) => setDialogData({ ...dialogData, phonenumber: event.target.value })}
                  error={!onVerify(dialogData.phonenumber)}
                  helperText={onVerify(dialogData.phonenumber) ? false : '请输入正确的手机号码'}
                />
              </Grid>
              <Grid item xs={2}>
                <Box component='span' m={1} className={classes.dialog_key}>
                  邮箱
                </Box>
              </Grid>
              <Grid item xs={4}>
                <TextField
                  id='outlined-basic'
                  label=''
                  variant='outlined'
                  size='small'
                  value={dialogData.email}
                  onChange={(event) => setDialogData({ ...dialogData, email: event.target.value })}
                  error={!onVerify(dialogData.email)}
                  helperText={onVerify(dialogData.email) ? false : '请输入正确的邮箱地址'}
                />
              </Grid>
              {dialogType.type === 'add' ? (
                <>
                  <Grid item xs={2}>
                    <Box component='span' m={1} className={classes.dialog_key}>
                      <Box component='span' color='red'>
                        *
                      </Box>
                      用户名称
                    </Box>
                  </Grid>
                  <Grid item xs={4}>
                    <TextField
                      id='outlined-basic'
                      label=''
                      variant='outlined'
                      size='small'
                      value={dialogData.userName}
                      onChange={(event) => setDialogData({ ...dialogData, userName: event.target.value })}
                      error={!onVerify(dialogData.userName, 'string')}
                      helperText={onVerify(dialogData.userName, 'string') ? false : '用户名称不能为空'}
                    />
                  </Grid>
                  <Grid item xs={2}>
                    <Box component='span' m={1} className={classes.dialog_key}>
                      <Box component='span' color='red'>
                        *
                      </Box>
                      用户密码
                    </Box>
                  </Grid>
                  <Grid item xs={4}>
                    <FormControl
                      // className={this.props.classes.outlined}
                      size='small'
                      error={!dialogData.password}
                      variant='outlined'
                    >
                      <OutlinedInput
                        id='outlined-adornment-password'
                        type={showPassword ? 'text' : 'password'}
                        value={dialogData.password}
                        onChange={(event) => setDialogData({ ...dialogData, password: event.target.value })}
                        endAdornment={
                          <InputAdornment position='end'>
                            <IconButton
                              aria-label='toggle password visibility'
                              onClick={handleClickShowPassword}
                              onMouseDown={handleMouseDownPassword}
                              edge='end'
                            >
                              {showPassword ? <Visibility /> : <VisibilityOff />}
                            </IconButton>
                          </InputAdornment>
                        }
                        labelWidth={0}
                      />
                      {dialogData.password ? null : (
                        <FormHelperText id='outlined-weight-helper-text'>请输入您的密码</FormHelperText>
                      )}
                    </FormControl>
                  </Grid>
                </>
              ) : null}

              <Grid item xs={2}>
                <Box component='span' m={1} className={classes.dialog_key}>
                  用户性别
                </Box>
              </Grid>
              <Grid item xs={4}>
                <FormControl variant='outlined' size='small' style={{ width: '100%' }}>
                  <Select
                    native
                    value={dialogData.sex}
                    onChange={(event) => setDialogData({ ...dialogData, sex: event.target.value })}
                  >
                    {sexList.map((v) => (
                      <option key={v.dictCode + 'sex'} value={v.dictCode}>
                        {v.dictLabel}
                      </option>
                    ))}
                  </Select>
                </FormControl>
              </Grid>
              <Grid item xs={2}>
                <Box component='span' m={1} className={classes.dialog_key}>
                  状态
                </Box>
              </Grid>
              <Grid item xs={4}>
                <RadioGroup
                  aria-label='gender'
                  name='gender1'
                  value={dialogData.status}
                  style={{ flexDirection: 'initial', flexWrap: 'nowrap' }}
                  onChange={(event) => setDialogData({ ...dialogData, status: event.target.value })}
                >
                  {disable.map((v) => (
                    <FormControlLabel value={v.dictValue} key={v.dictLabel} control={<Radio />} label={v.dictLabel} />
                  ))}
                </RadioGroup>
              </Grid>
              <Grid item xs={2}>
                <Box component='span' m={1} className={classes.dialog_key}>
                  岗位
                </Box>
              </Grid>
              <Grid item xs={4}>
                <FormControl variant='outlined' size='small' style={{ width: '100%' }}>
                  <Select
                    labelId='demo-mutiple-checkbox-label'
                    id='demo-mutiple-checkbox'
                    multiple
                    value={dialogData.postIds}
                    onChange={(event) => setDialogData({ ...dialogData, postIds: event.target.value })}
                    input={<Input />}
                    renderValue={(selected) =>
                      postsList
                        ?.filter((v) => selected.some((value) => value === v.postId))
                        ?.map((v) => v.postName)
                        .join(', ')
                    }
                    MenuProps={MenuProps}
                  >
                    {postsList?.map((v) => (
                      <MenuItem key={v.postId} value={v.postId}>
                        <Checkbox checked={dialogData?.postIds?.indexOf(v.postId) > -1} />
                        <ListItemText primary={v.postName} />
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>
              </Grid>
              <Grid item xs={2}>
                <Box component='span' m={1} className={classes.dialog_key}>
                  角色
                </Box>
              </Grid>
              <Grid item xs={4}>
                <FormControl variant='outlined' size='small' style={{ width: '100%' }}>
                  <Select
                    labelId='demo-roleIds-checkbox-label'
                    id='demo-roleIds-checkbox'
                    multiple
                    value={dialogData.roleIds}
                    onChange={(event) => setDialogData({ ...dialogData, roleIds: event.target.value })}
                    input={<Input />}
                    renderValue={(selected) =>
                      rolesList
                        ?.filter((v) => selected.some((value) => value === v.roleId))
                        ?.map((v) => v.roleName)
                        .join(', ')
                    }
                    MenuProps={MenuProps}
                  >
                    {rolesList?.map((v) => (
                      <MenuItem key={v.roleId} value={v.roleId}>
                        <Checkbox checked={dialogData?.roleIds?.indexOf(v.roleId) > -1} />
                        <ListItemText primary={v.roleName} />
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>
              </Grid>
              <Grid item xs={2}>
                <Box component='span' m={1} className={classes.dialog_key}>
                  备注
                </Box>
              </Grid>
              <Grid item xs={10}>
                <TextareaAutosize
                  aria-label='empty textarea'
                  placeholder=''
                  maxLength={200}
                  value={dialogData.remark}
                  onChange={(event) => setDialogData({ ...dialogData, remark: event.target.value })}
                  style={{ width: '100%', height: '100px' }}
                />
              </Grid>
            </Grid>
          </Box>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => onDialogOpen(false)} variant='outlined'>
            取消
          </Button>
          <Button onClick={onAddUser} variant='contained' color='primary'>
            确定
          </Button>
        </DialogActions>
      </Dialog>
    </>
  )
}

export default DialogAddAndEdit
